<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/libs/layui/css/layui.css">
    <style>
        .canvas {
            height: 600px;
            background-color: #f5f7f9;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-md12">
                <table id="table_process_def" lay-filter="table_process_def"></table>
            </div>
            <div class="layui-col-md12">
                <div class="canvas" id="view_canvas"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<!-- viewer distro (with pan and zoom) -->
<script src="../assets/libs/bpmn-navigated-viewer.development.js"></script>
<!-- needed for this example only -->
<script src="../assets/libs/jquery.js"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="start">启动</a>
</script>
<script>
    layui.use(['element', 'table'], function(){
        var $ = layui.$;
        var element = layui.element;
        var table = layui.table;

        table.render({
            elem: '#table_process_def',
            url: '/processModeler/modelers',
            cols: [[
                {type: 'numbers'},
                {title: 'ID', field: 'id'},
                {title: '版本', field: 'ver'},
                {title: 'KEY', field: 'key'},
                {title: '名称', field: 'name'},
                {title: '部署日期', field: 'deployment_date'},
                {title:'操作', toolbar: '#barDemo', width:150}
            ]],
            height: 300,
            done: function(res){
                if(res.data && res.data[0] && res.data[0].id) {
                    showProcess(res.data[0].id);
                }
            }
        });

        table.on('row(table_process_def)', function(obj){
            showProcess(obj.data.id);
        });

        //监听行工具事件
        table.on('tool(table_process_def)', function(obj){
            var data = obj.data;
            var key = data.key;
            if(obj.event === 'start'){
                $.post('/processInstance/start', {
                        key: key
                    },
                    function() {
                        alert("启动成功");
                    }
                );
            }
        });

        // viewer instance
        var bpmnViewer = new BpmnJS({
            container: '#view_canvas'
        });

        /**
         * 显示流程图
         */
        var showProcess = function(processDef_id) {
            var diagramUrl = '/processModeler/diagram/' + processDef_id;
            async function openDiagram(bpmnXML) {
                try {
                    await bpmnViewer.importXML(bpmnXML);
                    // 让图能自适应屏幕
                    // var canvas = bpmnViewer.get('canvas');
                    // canvas.zoom('fit-viewport');
                } catch (err) {
                    console.error('could not import BPMN 2.0 diagram', err);
                }
            }
            $.get(diagramUrl, openDiagram, 'text');
        }
    });
</script>
</body>
</html>